<template>
  <div class="header-menu-box" ref="menu">
    <!-- <div
      v-for="(item, index) in visableMenus"
      :class="[
        'menu-item-wrap fx-ct-ct cs-pt',
        {
          active: checkActive(item),
        },
        `${index}`,
      ]"
      :key="index"
      @click="selectMenuHandle(item, index)"
    >
      <div :class="['of-np ft-14  ts-al cr-wt-6']">
        {{ item.name }}
      </div>
      <div class="scroll-bar"></div>
    </div>
    <div class="fx-ct-ct" v-show="visableMenus.length < this.allMenu.length">
      <TrDropdown
        :dataList="unvisableMenus"
        :isShowValue="false"
        @dropBack="commandHandle"
      >
        <img class="ic-20" src="@/assets/icons/more.png" alt="" />
      </TrDropdown>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import TrDropdown from "@/components/Tr-dropdown/Tr-dropdown.vue";
export default {
  name: "HeaderMenuBox",
  // components: { TrDropdown },
  data: () => ({
    menuWidth: 0,
    visableMenuList: [],
  }),
  computed: {
    ...mapGetters(["allMenu", "keyCollapse"]),
    visableMenus() {
      const index = this.findIndexExceedingWidth(this.allMenu, this.menuWidth);
      return index == -1 ? this.allMenu : this.allMenu.slice(0, index);
    },
    unvisableMenus() {
      let list = this.allMenu.slice(this.visableMenus.length);
      return list.map((item) => {
        return {
          label: item.name,
          value: item.path,
          ...item,
        };
      });
    },
  },
  watch: {
    keyCollapse() {
      setTimeout(() => {
        this.menuWidth = this.$refs?.menu?.offsetWidth;
      }, 300);
    },
  },
  methods: {
    commandHandle(val) {
      this.selectMenuHandle(val);
    },
    checkActive(item) {
      return this.$route.fullPath.includes(item.path);
    },
    findPath(menu) {
      if (!menu.children || menu.children.length == 0) return menu.path;
      let path = menu.path;
      if (menu.children && menu.children.length > 0) {
        path = this.findPath(menu.children[0]);
      }
      return path;
    },
    selectMenuHandle(item) {
      this.$router.push(this.findPath(item));
    },
    findIndexExceedingWidth(arr, target) {
      let accumulatedWidth = 0;
      for (let i = 0; i < arr.length; i++) {
        accumulatedWidth += arr[i].width;
        if (accumulatedWidth > target - 20) {
          return i;
        }
      }
      return -1;
    },
    initHandle() {
      this.allMenu.forEach((item) => {
        let span = document.createElement("span");
        span.style.position = "fixed";
        span.style.fontSize = "14px";
        span.innerHTML = item.name;
        document.body.appendChild(span);
        this.$set(
          item,
          "width",
          span.offsetWidth < 56 ? 80 : span.offsetWidth + 24
        );
        document.body.removeChild(span);
      });
    },
  },
  mounted() {
    // this.menuWidth = this.$refs.menu.offsetWidth;
    // this.initHandle();
    // window.addEventListener("resize", () => {
    //   this.menuWidth = this.$refs?.menu?.offsetWidth;
    // });
  },
};
</script>
<style lang="scss" scoped>
.header-menu-box {
  position: relative;
  width: 0;
  flex: 1;
  height: $menu-height;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  .menu-item-wrap {
    position: relative;
    padding: 0 12px;
    min-width: 80px;
    .scroll-bar {
      position: absolute;
      width: calc(100% - 16px);
      height: 3px;
      opacity: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      background-color: #fff;
    }
    &.active,
    &:hover {
      div {
        color: $white-color;
      }
      .scroll-bar {
        transition: opacity 0.3s;
        opacity: 1;
      }
    }
  }
}
</style>
